<template>
    <div>
        <input v-model.trim="info" @keyup.enter="select" placeholder="输入关键字搜索">
        <table class="my-table">
            <thead>
                <tr>
                    <th>就诊日期</th>
                    <th>医生姓名</th>
                    <th>诊断结果</th>
                    <th>处方信息</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in records" :key="item.doctor">
                    <td>{{ item.date }}</td>
                    <td>{{ item.doctor }}</td>
                    <td>{{ item.diagnosis }}</td>
                    <td>{{ item.prescription }}</td>
                    <!-- 1.点击详情,展示详情组件 -->
                    <td @click.prevent="showDetail(index)">详情</td>
                </tr>
            </tbody>
        </table>
        <DetailComp v-show="isShow" :userInfo="userInfo" @close="isShow=$event"></DetailComp>
    </div>
</template>

<script>
import DetailComp from './DetailComp.vue';
export default {
    name: 'TableComp',
    data() {
        return {
            info: '',
            isShow: false,
            userInfo: {
                date: '2022-01-01',
                doctor: '张三',
                diagnosis: '感冒',
                prescription: '感冒药',
            }
        }
    },
    props: {
        records: {
            type: Array,
            required: true
        },
    },
    components: {
        DetailComp

    },
    methods: {
        select() {
            // 判空
            if (!this.info) {
                alert('请输入正确姓名')
                return
            }
            this.$emit('selectInfo', this.info)
            this.info = ''
        },
        showDetail(index) {
            this.isShow = true
            this.userInfo = this.records[index]
            // console.log('父亲组件', this.records[index])
        }
    }

}
</script>

<style scoped>
.my-table {
    border-collapse: collapse;
    width: 100%;
}

.my-table td,
.my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.my-table th {
    background-color: #f2f2f2;
}
</style>